/*
 * @Author: linxun 
 * @Date: 2021-03-05 15:23:14 
 * @Last Modified by: linxun
 * @Last Modified time: 2021-03-19 17:19:12
 * @Description: 数据集编辑Modal
 */

import React, { useEffect } from 'react';
import { Modal, Form, Input } from 'antd';
import { useIntl } from 'umi';

const FormItem = Form.Item;
const { TextArea } = Input;

const commonLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 16 },
};

const EditModal = props => {
  const [form] = Form.useForm();
  const { formatMessage } = useIntl();
  const { visible, cancel, loading, onSubmit, curRecord } = props;

  useEffect(() => {
    form.setFieldsValue(curRecord);
  }, [curRecord]);

  const onOk = () => {
    form.validateFields().then(values => {
      onSubmit(values);
    }).catch(err => {
      console.log(err);
    });
  };

  return (
    <Modal
      title={`${curRecord.name}-编辑数据集`}
      visible={visible}
      onCancel={cancel}
      confirmLoading={loading}
      onOk={onOk}
      maskClosable={false}
      forceRender
      destroyOnClose
    >
      <Form form={form} scrollToFirstError {...commonLayout}>
        <FormItem label={formatMessage({ id: 'dataSet.dataSet.edit.description' })} name='description'>
          <TextArea placeholder={formatMessage({ id: 'dataSet.dataSet.edit.description.placeholder' })} />
        </FormItem>
      </Form>
    </Modal>
  )
}

export default EditModal;